<template>
  <div class="home drag-box" data-id="3993cfcf">
   <head-img :url="url" :font="font" :title="title" @jumpsTo="jumpsTo"></head-img> 
    <div style="margin-bottom: 20px;">
      <el-card class="box-card" shadow="hover" >
        <div class="card-content drag-box">
          <div class="box">
            <el-row :gutter=20 type="flex" class="el-row" v-for="(item,index) in projectList" :key="index">
              <el-col :xl=5 :lg=10 :sm=12 :xs=24 v-for="list in item" :key="list.img">
                <div class="column drag-box">
                  <div style="margin-bottom: 20px;">
                    <el-card
                      class="box-card pro"
                      shadow="hover"
                      :body-style="{
                  padding: '0px'
                }"
                    >
                      <div class="card-content drag-box">
                       <!--  <img class="item-pic" v-lazy="imgUrl"/> -->
                        <el-image 
                          :src="list.thumImg"
                          :lazy="false"
                          :preview-src-list="list.img"
                        ></el-image>
                        <div class="drag-box card-meta-detail">
                          <div class="card-meta-title">{{list.title}}</div>

                          <div class="card-meta-description">{{list.descript}}</div>
                        </div>
                      </div>
                    </el-card>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
    import headImg from "../components/head-img.vue"
/*     import VueLazyLoad from 'vue-lazyload'
    import Vue from 'vue'
    Vue.use(VueLazyLoad,{
        error:'',
        loading: '../assets/images/loading.gif'
    }) */
    export default {
        data (){
            return {
                url: require("../assets/images/product.jpg"),
                font:"Measure each point with the most standard specifications",
                title:"用最标准的规范去衡量每一个点" ,
                projectList:[
                  [
                    {
                      title: "苏州自来水厂",
                      descript:"建立全国社工信息人才库",
                      img:["http://114.55.164.189:80/group1/M00/00/00/rBAozWA9souATGIuAFB6OwsXFQQ097.png"],
                      thumImg:"http://114.55.164.189:80/group1/M00/00/00/rBAozWA9souATGIuAFB6OwsXFQQ097_600x600.png"
                    },
                    {
                      title: "泰和污水处理厂",
                      descript:"建立全国社工信息人才库",
                      img:["https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fc13489aa90c47c885928642af8ea1a0~tplv-k3u1fbpfcp-watermark.image"],
                      thumImg:"http://114.55.164.189:80/group1/M00/00/00/rBAozWA9y9WAAm91AFB6OzB1Oeo676_600x600.png"
                    },
                    {
                      title: "上海金兴污水处理厂",
                      descript:"建立全国社工信息人才库",
                      img:["https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a666f8121d9449b0bb23b53d1f0a35fd~tplv-k3u1fbpfcp-watermark.image"],
                      thumImg:"http://114.55.164.189:80/group1/M00/00/00/rBAozWA9y8OADLIYAFB6O6KCzto633_600x600.png"
                    },
                  ],
                  [
                    {
                      title: "光明智慧水厂",
                      descript:"建立全国社工信息人才库",
                      img:["https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d79eafe95c8d4b03aa0e79d19a1a3eb6~tplv-k3u1fbpfcp-watermark.image"],
                      thumImg:"http://114.55.164.189:80/group1/M00/00/00/rBAozWA9y6-AD1G6AFB6O0gg1mY065_600x600.png"
                    },
                    {
                      title: "全国志愿者服务信息管理系统",
                      descript:"建立全国社工信息人才库",
                      img:["http://114.55.164.189:80/group1/M00/00/00/rBAozWA9y5mAa_tfAFxzux4kNNk667.png"],
                      thumImg:"http://114.55.164.189:80/group1/M00/00/00/rBAozWA9y5mAa_tfAFxzux4kNNk667_600x600.png"
                    },
                    {
                      title: "全国志愿者服务信息管理系统",
                      descript:"建立全国社工信息人才库",
                      img:["https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ca9363466a504e49809babeb76e24b56~tplv-k3u1fbpfcp-watermark.image"],
                      thumImg:"http://114.55.164.189:80/group1/M00/00/00/rBAozWA9y4aAOwxeAFxzu01uU3Y978_600x600.png"
                    },
                  ],
                  [
                    {
                      title: "全国基层政权信息系统",
                      descript:"建立全国社工信息人才库",
                      img:["http://114.55.164.189:80/group1/M00/00/00/rBAozWA9y3GAYMgiAFxzu6gLQ34308.png"],
                      thumImg:"http://114.55.164.189:80/group1/M00/00/00/rBAozWA9y3GAYMgiAFxzu6gLQ34308_600x600.png"
                    },
                    {
                      title: "社会工作信息管理系统",
                      descript:"建立全国社工信息人才库",
                      img:["http://114.55.164.189:80/group1/M00/00/00/rBAozWA9y1aABji0AFxzu3B2K14537.png"],
                      thumImg:"http://114.55.164.189:80/group1/M00/00/00/rBAozWA9y1aABji0AFxzu3B2K14537_600x600.png"
                    },
                    {
                      title: "上海金山枫泾智慧水厂",
                      descript:"建立全国社工信息人才库",
                      img:["https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/678aa8197df949f2ad8fbb0cf35b8f1e~tplv-k3u1fbpfcp-watermark.image"],
                      thumImg:"http://114.55.164.189:80/group1/M00/00/00/rBAozWA9yzCAWY01AFxzuwG-xJ0993_600x600.png"
                    },
                  ],
                ]
            }
        },
        methods :{
          hadnlerScroll(){
             var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
             var el = document.getElementsByClassName("box")[0].offsetTop
             if(el > scrollTop){
               let cards = document.getElementsByClassName("pro")
               cards.forEach((element,i )=> {
                 setTimeout(() =>{
                   this.addClassStyle(element)
                 },500*i)
               });
             }
          },
          addClassStyle(val){
             val.classList.add("animated", "fadeInUp")
          },
          jumpsTo(){
            var el = document.getElementsByClassName("box")[0].offsetTop
            this.$nextTick(() =>{
              window.scrollTo({"behavior":"smooth","top":el});
            })
          }
        },
        components:{
            headImg
        },
        mounted(){
          //注册监听动画的事件
          window.addEventListener('scroll' ,this.hadnlerScroll)
        },
        destroyed(){
          window.removeEventListener('scroll' ,this.hadnlerScroll)
        },
    }
</script>
<style lang="scss" scoped>
.card-meta-detail {
  padding: 16px 20px 20px;
  background-color: #f5f5f5;
}
.card-meta-detail > div:not(:last-child) {
  margin-bottom: 8px;
}
.card-meta-title {
  color: #0d1a26;
  font-weight: 400;
  font-size: 20px;
}
.card-meta-description {
  color: #697b8c;
  font-size: 16px;
}
.el-row {
  justify-content: center;
  margin-bottom: 50px;
}
.box {
  margin-top: 50px;
}
.box-card:hover {
    scale: 1.5;
}
.el-image__placeholder {
  background: url('../assets/images/loading.gif') no-repeat 50% 50% !important;
  background-size: 50% !important;
}
</style>
